<template>
  <div>
    <CommCard title="交易用户数" :count="orderUser | numberFormat">
      <template #main>
        <v-chart autoresize :options="getOptions()"></v-chart>
      </template>
      <template #bottom>
        <span class="leftText">退货率</span>
        <span>{{ returnRate }}%</span>
      </template>
    </CommCard>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "TradeUser",
  computed: {
    ...mapState({
      orderUser: state => state.echarts.echartsData.orderUser,
      returnRate: state => state.echarts.echartsData.returnRate,
      orderUserTrend: state => state.echarts.echartsData.orderUserTrend,
      orderUserTrendAxis: state => state.echarts.echartsData.orderUserTrendAxis
    })
  },
  methods: {
    getOptions() {
      return {
        // title:{},
        // legend:{},
        grid: {
          left: 0,
          right: 10,
          top: 0,
          bottom: 0
        },
        xAxis: {
          data: this.orderUserTrendAxis || [],
          show: false
        },
        yAxis: {
          show: false
        },
        series: {
          name: "实时用户数",
          data: this.orderUserTrend || [],
          type: "bar",
          areaStyle: {
            color: "hotpink"
          },
          barWidth: "50%"
        },
        tooltip: {
          trigger: "axis"
        },
        color: "green"
      };
    }
  }
};
</script>

<style scoped></style>
